<template>
  <nav :class="navClasses">
    <div class="nav-container">
      <!-- 品牌区域 -->
      <div class="nav-brand">
        <router-link 
          v-if="brandTo" 
          :to="brandTo" 
          class="brand-link"
          @click="closeMobileMenu"
        >
          <img 
            v-if="brandImage" 
            :src="brandImage" 
            :alt="brandText || 'Logo'"
            class="brand-image"
          />
          <span v-if="brandText" class="brand-text">{{ brandText }}</span>
        </router-link>
        
        <div v-else class="brand-link">
          <img 
            v-if="brandImage" 
            :src="brandImage" 
            :alt="brandText || 'Logo'"
            class="brand-image"
          />
          <span v-if="brandText" class="brand-text">{{ brandText }}</span>
        </div>
      </div>

      <!-- 桌面端导航菜单 -->
      <div class="nav-menu-desktop">
        <div class="nav-links">
          <template v-for="item in menuItems" :key="item.key">
            <div v-if="item.children" class="nav-dropdown">
              <button
                @click="toggleDropdown(item.key)"
                class="nav-link dropdown-trigger"
                :class="{ 'active': openDropdowns.includes(item.key) }"
              >
                <component v-if="item.icon" :is="item.icon" class="nav-icon" />
                <span>{{ item.label }}</span>
                <ChevronDownIcon 
                  class="dropdown-icon"
                  :class="{ 'rotate-180': openDropdowns.includes(item.key) }"
                />
              </button>
              
              <!-- 下拉菜单 -->
              <transition name="dropdown">
                <div 
                  v-show="openDropdowns.includes(item.key)"
                  class="dropdown-menu"
                >
                  <router-link
                    v-for="child in item.children"
                    :key="child.key"
                    :to="child.to"
                    class="dropdown-item"
                    @click="closeDropdowns"
                  >
                    <component v-if="child.icon" :is="child.icon" class="dropdown-icon-small" />
                    <span>{{ child.label }}</span>
                  </router-link>
                </div>
              </transition>
            </div>
            
            <router-link
              v-else
              :to="item.to"
              class="nav-link"
              :class="{ 'active': $route.path === item.to }"
            >
              <component v-if="item.icon" :is="item.icon" class="nav-icon" />
              <span>{{ item.label }}</span>
            </router-link>
          </template>
        </div>

        <!-- 右侧操作区域 -->
        <div class="nav-actions">
          <slot name="actions">
            <ThemeSwitcher />
          </slot>
        </div>
      </div>

      <!-- 移动端菜单切换按钮 -->
      <div class="nav-mobile-toggle">
        <button
          @click="toggleMobileMenu"
          class="mobile-menu-btn"
          :aria-expanded="mobileMenuOpen"
          aria-label="切换导航菜单"
        >
          <Bars3Icon v-if="!mobileMenuOpen" class="w-6 h-6" />
          <XMarkIcon v-else class="w-6 h-6" />
        </button>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <transition name="mobile-menu">
      <div v-show="mobileMenuOpen" class="nav-menu-mobile">
        <div class="mobile-menu-content">
          <template v-for="item in menuItems" :key="item.key">
            <div v-if="item.children" class="mobile-nav-group">
              <button
                @click="toggleMobileDropdown(item.key)"
                class="mobile-nav-trigger"
                :class="{ 'active': mobileopenDropdowns.includes(item.key) }"
              >
                <div class="flex items-center">
                  <component v-if="item.icon" :is="item.icon" class="mobile-nav-icon" />
                  <span>{{ item.label }}</span>
                </div>
                <ChevronDownIcon 
                  class="w-4 h-4 transition-transform duration-200"
                  :class="{ 'rotate-180': mobileopenDropdowns.includes(item.key) }"
                />
              </button>
              
              <transition name="mobile-dropdown">
                <div v-show="mobileopenDropdowns.includes(item.key)" class="mobile-nav-children">
                  <router-link
                    v-for="child in item.children"
                    :key="child.key"
                    :to="child.to"
                    class="mobile-nav-child"
                    @click="closeMobileMenu"
                  >
                    <component v-if="child.icon" :is="child.icon" class="mobile-nav-child-icon" />
                    <span>{{ child.label }}</span>
                  </router-link>
                </div>
              </transition>
            </div>
            
            <router-link
              v-else
              :to="item.to"
              class="mobile-nav-link"
              :class="{ 'active': $route.path === item.to }"
              @click="closeMobileMenu"
            >
              <component v-if="item.icon" :is="item.icon" class="mobile-nav-icon" />
              <span>{{ item.label }}</span>
            </router-link>
          </template>

          <!-- 移动端操作区域 -->
          <div class="mobile-nav-actions">
            <slot name="mobileActions">
              <ThemeSwitcher />
            </slot>
          </div>
        </div>
      </div>
    </transition>
  </nav>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, type Component } from 'vue'
import { Bars3Icon, XMarkIcon, ChevronDownIcon } from '@heroicons/vue/24/outline'
import ThemeSwitcher from './ThemeSwitcher.vue'

export interface NavMenuItem {
  key: string
  label: string
  to?: string
  icon?: Component
  children?: NavMenuItem[]
  external?: boolean
}

export interface ModernNavProps {
  // 品牌信息
  brandText?: string
  brandImage?: string
  brandTo?: string
  
  // 菜单项
  menuItems?: NavMenuItem[]
  
  // 样式
  variant?: 'default' | 'transparent' | 'bordered'
  fixed?: boolean
  blur?: boolean
}

const props = withDefaults(defineProps<ModernNavProps>(), {
  menuItems: () => [],
  variant: 'default',
  fixed: false,
  blur: true,
})

// 移动端菜单状态
const mobileMenuOpen = ref(false)
const openDropdowns = ref<string[]>([])
const mobileopenDropdowns = ref<string[]>([])

// 导航栏样式
const navClasses = computed(() => {
  const baseClasses = 'nav-modern'
  const variantClasses = {
    default: 'bg-white/90 dark:bg-gray-900/90 border-b border-gray-200 dark:border-gray-700',
    transparent: 'bg-transparent',
    bordered: 'bg-white dark:bg-gray-900 border-b-2 border-primary-500'
  }
  
  return [
    baseClasses,
    variantClasses[props.variant],
    {
      'fixed top-0 left-0 right-0 z-50': props.fixed,
      'backdrop-blur-md': props.blur && props.variant !== 'transparent'
    }
  ]
})

// 切换移动端菜单
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
  if (mobileMenuOpen.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
    mobileopenDropdowns.value = []
  }
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  mobileMenuOpen.value = false
  document.body.style.overflow = ''
  mobileopenDropdowns.value = []
}

// 切换下拉菜单
const toggleDropdown = (key: string) => {
  const index = openDropdowns.value.indexOf(key)
  if (index > -1) {
    openDropdowns.value.splice(index, 1)
  } else {
    openDropdowns.value = [key] // 只允许一个下拉菜单打开
  }
}

// 切换移动端下拉菜单
const toggleMobileDropdown = (key: string) => {
  const index = mobileopenDropdowns.value.indexOf(key)
  if (index > -1) {
    mobileopenDropdowns.value.splice(index, 1)
  } else {
    mobileopenDropdowns.value.push(key)
  }
}

// 关闭所有下拉菜单
const closeDropdowns = () => {
  openDropdowns.value = []
}

// 处理点击外部关闭下拉菜单
const handleClickOutside = (event: Event) => {
  const target = event.target as Element
  if (!target.closest('.nav-dropdown')) {
    closeDropdowns()
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  document.body.style.overflow = ''
})
</script>

<style scoped>
.nav-modern {
  @apply relative transition-all duration-300;
}

.nav-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  @apply flex items-center justify-between h-16;
}

/* 品牌区域 */
.nav-brand {
  @apply flex-shrink-0;
}

.brand-link {
  @apply flex items-center space-x-3 text-xl font-bold text-gray-900 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 transition-colors duration-200;
}

.brand-image {
  @apply h-8 w-auto;
}

.brand-text {
  @apply font-heading;
}

/* 桌面端菜单 */
.nav-menu-desktop {
  @apply hidden lg:flex lg:items-center lg:justify-between lg:flex-1 lg:ml-8;
}

.nav-links {
  @apply flex items-center space-x-6;
}

.nav-link {
  @apply flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200;
}

.nav-link.active {
  @apply text-primary-500 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
}

.nav-icon {
  @apply w-4 h-4;
}

/* 下拉菜单 */
.nav-dropdown {
  @apply relative;
}

.dropdown-trigger {
  @apply cursor-pointer;
}

.dropdown-icon {
  @apply w-4 h-4 transition-transform duration-200 ml-1;
}

.dropdown-menu {
  @apply absolute top-full left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50;
}

.dropdown-item {
  @apply flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-primary-500 dark:hover:text-primary-400 transition-colors duration-200;
}

.dropdown-icon-small {
  @apply w-3 h-3;
}

/* 操作区域 */
.nav-actions {
  @apply flex items-center space-x-4;
}

/* 移动端切换按钮 */
.nav-mobile-toggle {
  @apply lg:hidden;
}

.mobile-menu-btn {
  @apply p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200;
}

/* 移动端菜单 */
.nav-menu-mobile {
  @apply lg:hidden absolute top-full left-0 right-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 shadow-lg z-40;
}

.mobile-menu-content {
  @apply max-w-7xl mx-auto px-4 py-4 space-y-2;
}

.mobile-nav-link {
  @apply flex items-center space-x-3 px-3 py-3 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200;
}

.mobile-nav-link.active {
  @apply text-primary-500 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
}

.mobile-nav-icon {
  @apply w-5 h-5;
}

.mobile-nav-group {
  @apply space-y-1;
}

.mobile-nav-trigger {
  @apply w-full flex items-center justify-between px-3 py-3 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200;
}

.mobile-nav-children {
  @apply pl-6 space-y-1 mt-2;
}

.mobile-nav-child {
  @apply flex items-center space-x-3 px-3 py-2 rounded-md text-sm text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200;
}

.mobile-nav-child-icon {
  @apply w-4 h-4;
}

.mobile-nav-actions {
  @apply mt-6 pt-4 border-t border-gray-200 dark:border-gray-700;
}

/* 动画 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease-in-out;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-menu-enter-active,
.mobile-menu-leave-active {
  transition: all 0.3s ease-in-out;
}

.mobile-menu-enter-from,
.mobile-menu-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.mobile-dropdown-enter-active,
.mobile-dropdown-leave-active {
  transition: all 0.2s ease-in-out;
}

.mobile-dropdown-enter-from,
.mobile-dropdown-leave-to {
  opacity: 0;
  max-height: 0;
}

.mobile-dropdown-enter-to,
.mobile-dropdown-leave-from {
  opacity: 1;
  max-height: 200px;
}
</style>
